<template>
	<view class="center">
		<hea-ders title="收款单">
			<image class="left" slot='left' src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
			<image slot='Rright' src="@/static/images/s28.png" mode="widthFix"></image>
		</hea-ders>
		<view class="lis">
			<view class="lis_cent">
				<text>单据日期<text style="color: rgba(215, 30, 6, 1);">*</text></text>
				<view class="value">
					<biaofun-datetime-picker placeholder="请选择发布时间" defaultValue="2020-06-08" fields="day" @change="changeDatetimePicker"></biaofun-datetime-picker>
				</view>
			</view>
			<view class="lis_cent">
				<text>客户<text style="color: rgba(215, 30, 6, 1);">*</text></text>
				<view class="ris">
					<text>12345</text>
					<image src="@/static/images/arrow_right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="lis_cent">
				<text>应收余额</text>
				<view class="ris">
					<text>0</text>
				</view>
			</view>
		</view>

		<view class="lis">
			<view class="lis_cent">
				<text>优惠金额</text>
				<input type="text" value="" placeholder-style="text-align:right;" placeholder="请输入" />
			</view>
			<view class="lis_cent">
				<text>收款</text>
				<view class="ris" @click="gathering">
					<text>0</text>
					<image v-if="flag" src="@/static/images/arrow_right.png" mode="widthFix"></image>
					<image v-else src="@/static/images/arrow_right.png" style="transform: rotate(90deg);" mode="widthFix"></image>
				</view>
			</view>
			<block v-if="!flag">
				<view class="lis_centt">
					<text>收款金额</text>
					<view class="ris">
						<input v-model="mnoey" type="text" value="" placeholder-style="text-align:right;" placeholder="请输入" />
					</view>
				</view>
				<view class="lis_centt">
					<text>收款账户</text>
					<view class="ris" @click="select">
						<text>{{selectn}}</text>
						<image src="@/static/images/arrow_right.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="lis_centt">
					<text>收款金额 2</text>
					<view class="ris">
						<input v-model="mnoeys" type="text" value="" placeholder-style="text-align:right;" placeholder="请输入" />
					</view>
				</view>
				<view class="lis_centt">
					<text>收款账户 2</text>
					<view class="ris" @click="select">
						<text>{{selects}}</text>
						<image src="@/static/images/arrow_right.png" mode="widthFix"></image>
					</view>
				</view>
			</block>
			<view class="lis_cent">
				<text>经手人</text>
				<view class="ris" @click="office">
					<text>18511111111</text>
					<image src="@/static/images/arrow_right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="lis">
			<textarea style="padding: 20rpx 0 0 20rpx; height: 160rpx;" placeholder="备注"></textarea>
		</view>

		<view class="lis">
			<view class="lis_cent">
				<text>附件</text>
				<view class="ris" @click="addimage">
					<text style=" color: #2499F6; 
							border-bottom:1rpx solid #2499F6;
							display: inline-block;">添加图片</text>
				</view>
			</view>
		</view>
		<view class="btn">
			<view class="btn_charge" @click="reset">
				<text> 重置</text>
			</view>
		</view>
	</view>
</template>

<script>
	import biaofunDatetimePicker from '@/components/biaofun-datetime-picker/biaofun-datetime-picker.vue';
	import heaDers from '@/pages/header/header.vue'
	export default {
		components: {
			biaofunDatetimePicker,
			heaDers
		},
		data() {
			return {
				defaultValue: '2020-06-08',
				flag: true,
			}
		},
	
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			changeDatetimePicker(date) {
				console.log('选择的日期时间数据：', date);
			},
			gathering() {
				this.flag = !this.flag
			},
			select() {
				uni.navigateTo({
					url: '../mnoey/mnoey'
				})
			},
			office() {
				uni.navigateTo({
					url: '../office/office'
				})
			},
			addimage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
					}
				});
			},
			reset(){
				uni.showModal({
					title:'确定要重置？',
					success:(res)=>{
						if(res.confirm){
							console.log(res.confirm +'确定')
							uni.navigateTo({
								url:'../client?flag='+false
							})

						}else if(res.cancel){
							console.log(`${res.cancel}取消`)
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		background: rgba(245, 245, 245, 1);
		overflow-y: scroll;
		.title {
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: rgba(36, 153, 246, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 22rpx;
			}

			text {
				font-size: 36rpx;
				color: #fff;
				font-weight: 400;
				font-family: PingFang SC;
			}

			.ima {
				image {
					width: 40rpx;
					margin-left: 5rpx;
				}
			}
		}

		.lis {
			background-color: #FFf;
			width: 100%;
			box-sizing: border-box;
			margin-top: 20rpx;

			.lis_cent {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				height: 100upx;
				align-items: center;
				color: rgba(66, 66, 66, 1);
				justify-content: space-between;
				padding: 20rpx;
				border-bottom: 1upx solid rgba($color: #707070, $alpha: 0.3);

				text {
					font-size: 35rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: rgba(66, 66, 66, 1);
					opacity: 1;
				}

				.ris {
					display: flex;
					align-items: center;

					text {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 40rpx;
						color: rgba(66, 66, 66, 1);
						opacity: 1;
						margin-right: 10rpx;
					}

					image {
						width: 20rpx;
					}
				}
			}

			.lis_centt {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				height: 88rpx;
				font-size: 28rpx;
				align-items: center;
				color: rgba(66, 66, 66, 1);
				justify-content: space-between;
				padding: 20rpx 20rpx 20rpx 60rpx;
				border-bottom: 1upx solid rgba($color: #707070, $alpha: 0.3);
				background-color: #FCFCFC;

				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 40rpx;
					color: red;
					opacity: 1;
				}
				.ris {
					display: flex;
					align-items: center;
					text {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 40rpx;
						color: rgba(66, 66, 66, 1);
						opacity: 1;
						margin-right: 10rpx;
					}

					image {
						width: 20rpx;
					}
				}
			}

			.lis_cent:last-child {
				border-bottom: none;
			}
		}

		.btn {
			width: 100%;
			height: 88rpx;
			background: #fff;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;

			.btn_mnoy {
				flex: 1;
				height: 100%;
				margin-left: 30rpx;
				box-sizing: border-box;

				text {

					display: inline-block;

					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 88rpx;
					color: #424242;
					opacity: 1;
				}
			}

			.btn_save {
				box-sizing: border-box;
				flex: 1;
				height: 100%;
				background-color: #FFA943;
				text-align: center;

				text {
					display: inline-block;
					font-size: 35rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 88rpx;
					color: #FFFFFF;
					opacity: 1;
				}
			}

			.btn_charge {

				flex: 1;
				height: 100%;
				background-color: #FF2929;
				text-align: center;
				box-sizing: border-box;

				text {
					width: 100%;
					display: inline-block;
					font-size: 35rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 88rpx;
					color: #FFFFFF;
					opacity: 1;
				}
			}
		}
	}



	.row:active {
		opacity: 0.8;
	}

	.name {
		flex-shrink: 0;
	}

	.value {
		flex: 1;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 40rpx;
		color: rgba(66, 66, 66, 1);
		opacity: 1;
	}

	.right-icon {
		color: #707070;
	}
</style>
